<template>
    <div class="homeNav">
        <ul>
            <router-link tag="li" v-for="data in listnavdata.threeLevelcategoryList" :key="data.categoryId" :to="{ path: `/GoodsSort/${type}/${data.categoryId}`}">
                    <img :src=data.categoryImg alt="">
                    <span>{{data.categoryName}}{{cataId}}</span>       
            </router-link>
            <!-- <li>
                <img src="https://static.biyao.com/mnew/img/master/index/classify_more@2x_0ed30f2.png" alt="">
                <span>查看全部</span>
            </li> -->
        </ul>
    </div>
</template>

<script>
export default {
    props: ['listnavdata','type'],
    // mounted(){
    //     console.log(2)
    //     console.log(this.listnavdata)
    // }
    data(){
        return{
            // cataId: this.listnavdata.categoryId
        }
    }
}
</script>

<style lang="stylus" scoped>
.homeNav
    width 100%
    max-height 3.50rem
    margin-top .2rem
    ul
        display flex
        flex-wrap wrap
        width 100%
        max-height 3.50rem
        list-style none 
        overflow hidden
        li
            width 20%
            height 1.75rem
            font-size .21rem
            img 
                display block
                width .88rem
                height .88rem
                margin 0 auto
            span 
                display block
                width .88rem
                margin 0 auto
                text-align center
                margin-top .10rem
</style>